<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎来到廿四节气的世界</title>
		<style>
			body {
				background: url(img/蓝灰色背景图.jpg) no-repeat center center;
				background-size: cover;
				/* 让背景图基于容器大小伸缩 */
				background-attachment: fixed;
				/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 此条属性必须设置否则可能无效*/
				background-color: #CCCCCC;
				/* 设置背景颜色，背景图加载过程中会显示背景色 */
			}

			#left {
				background-color: #79a8a9;
				color: #f4f7f7;
				height: 500px;
				width: 550px;
				float: left;
				margin-top: 25px;
			}


			#right {
				background-color: #dae9f4;
				height: 500px;
				width: 600px;
				float: right;
				margin-top: 25px;
			}

			footer {
				background-color: #1f4e5f;
				color: #f4f7f7;
				clear: both;
				text-align: center;
			}
			
			nav {
				display: block;
				padding: 10px 60px;
				padding-top: 0;
				margin-left: 250px;
			}

			ul {
				list-style-type: none;
			}

			a:link,
			a:visited {
				display: block;
				font-weight: bold;
				color: #f4f7f7;
				background-color: #7f9eb2;
				box-shadow: 10px 10px 15px #f4f7f7;
				width: 200px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
				text-transform: uppercase;

			}

			a:hover {
				background-color: #aacfd0;
			}

			a:active {
				background-color: #79a8a9;
			}

			li {
				float: left;
			}
		</style>
	</head>
	<body>
	
		<nav>
			<ul>
				<li><a href="渊源.html">节气渊源</a></li>
				<li><a href="shijian.html">交替时间</a></li>
				<li><a href="xisu.html">节气插画</a></li>
			</ul>
		</nav>
		<div id="left">
			<ul>
				<li>
					<h2>廿四</h2>
					<h3>对于二十四节气，中国人当然并不陌生，它以温润的“滴答声”写入中国人的基因里，在每个中国人的血脉里留下深痕。这也许是世上最诗意的历法，四时轮回，与你邂逅二十四次，像一封封时光信笺，悄然告诉你世事变迁。

</h3>
				</li>
			<li>
				<h3>它承载着稻香谷熟，引导着蛙鸣蝉唱，它演示着叶落花黄，沉淀出蜜甜酒香。沿着节气稳健的足迹，我们走过春夏秋冬，颖悟人生的真谛。

</h3>
			</li>
			<li>
				<h3>春秋待序，以生生不息。二十四节气如时光的纬编，编织出斑斓的岁月之网。莹莹烁烁，它清韵悠长，我们从这里重温人与天地万物感应共鸣的美好时光。

</h3>
			</li>
		</div>
		<div id="right">
			<img src="img/2.jpg" width="600px" height="500px"/>
			</div>

		</div>

		<footer>
			Designed by wsh</footer>

	</body>
</html>